<template>
  <div id="homeLineCharts" :class="className" :style="computeStyle()">
  </div>
</template>

<script setup lang="ts">
import { onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onMounted, watchEffect } from 'vue'
import useResize from '@/components/charts/mixins/resize'
import { init, type EChartsOption } from 'echarts'
import type { LineChartData } from '../../type'
import { nextTick } from 'process';

const props = withDefaults(defineProps<{
  className?: string,
  width?: string,
  height?: string,
  // 在 Vue 3 的 <script setup> 中，defineProps 已经集成了 TypeScript 的类型系统，能直接使用自定义类型来声明 props，所以不需要使用 PropType 包裹自定义类型。
  // 不过，如果你在 Vue 3 里使用非 <script setup> 的选项式 API，还是要按照 Vue 2 的方式，用 PropType 包裹自定义类型。
  chartData?: LineChartData // PropType<LineChartData>
}>(), {
  className: () => 'chart',
  width: () => '100%',
  height: () => '350px'
})

const { mounted, chart, beforeDestroy, activated, deactivated } = useResize()

const setOptions = (chartData: LineChartData) => {
  if (chart.value) {
    chart.value.setOption({
      xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        boundaryGap: false,
        axisTick: {
          show: false
        }
      },
      grid: {
        left: 10,
        right: 10,
        bottom: 20,
        top: 30,
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        },
        padding: 8
      },
      yAxis: {
        axisTick: {
          show: false
        }
      },
      legend: {
        data: ['expected', 'actual']
      },
      series: [{

        name: 'expected',
        itemStyle: {
          color: '#FF005A',
          lineStyle: {
            color: '#FF005A',
            width: 2
          }
        },
        smooth: true,
        type: 'line',
        data: chartData.expectedData,
        animationDuration: 2800,
        animationEasing: 'cubicInOut'
      },
      {
        name: 'actual',
        smooth: true,
        type: 'line',
        itemStyle: {
          color: '#3888fa',
          lineStyle: {
            color: '#3888fa',
            width: 2
          },
          areaStyle: {
            color: '#f3f8ff'
          }
        },
        data: chartData.actualData,
        animationDuration: 2800,
        animationEasing: 'quadraticOut'
      }]
    } as EChartsOption)
  }
}

watchEffect(() => {
  if (props.chartData) {
    setOptions(props.chartData)
  }
})

const initChart = () => {
  const lineChart = init(document.getElementById('homeLineCharts') as HTMLDivElement, 'macarons')
  if (props.chartData) {
    setOptions(props.chartData)
  }
  chart.value = lineChart
}

onMounted(() => {
  mounted()
  nextTick(() => {
    initChart()
  })
})

onBeforeMount(() => {
  beforeDestroy()
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})

onBeforeUnmount(() => {
  beforeDestroy()
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})

onActivated(() => {
  activated()
})

onDeactivated(() => {
  deactivated()
})

const computeStyle = () => {
  return {
    height: props.height,
    width: props.width,
  }
}
</script>

<style scoped></style>
